<template>
  <div class="box">
    <el-row>
      <el-col :span="24">
        <div class="left"></div>
        <div class="center"></div>
        <div class="right"></div>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <div class="top"></div>
        <div class="middle"></div>
        <div class="bottom"></div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {

}
</script>

<style lang="less" scoped>
.box {
  width: 100%;
  height: 100%;
  overflow: auto;
  .el-row:nth-of-type(1) {
    margin-bottom: 10px;
    .el-col {
      display: flex;
      height: 400px;
      border: 1px solid lightgray;
      .left {
        width: 150px;
        background-color: red;
      }
      .center {
        flex: 1;
        background-color: green;
      }
      .right {
        width: 150px;
        background-color: blue;
      }
    }
  }
  .el-row:nth-of-type(2) {
    margin-bottom: 10px;
    .el-col {
      display: flex;
      flex-direction: column;
      height: 400px;
      border: 1px solid lightgray;
      .top {
        height: 50px;
        background-color: red;
      }
      .middle {
        flex: 1;
        background-color: green;
      }
      .bottom {
        height: 50px;
        background-color: blue;
      }
    }
  }
}
</style>